"use strict";

function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return right[Symbol.hasInstance](left); } else { return left instanceof right; } }

function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }

var Odometer = function (win, doc) {
  var OdometerFn =
  /*#__PURE__*/
  function () {
    function OdometerFn(x, y) {
      _classCallCheck(this, OdometerFn);

      this.setting = {
        len: null,
        //默认最小位数
        speed: 5000,
        //动画速度
        num: "",
        //初始化值
        symbol: '',
        //默认的分割符号，千，万，千万
        dot: 0,
        //保留几位小数点 
        zero: true
      };
      this.$parent = doc.querySelector(x);
      this.html = "<div class=\"number-animate-dom\" data-num=\"{{num}}\">\n                        <span class=\"number-animate-span\">0</span>\n                        <span class=\"number-animate-span\">1</span>\n                        <span class=\"number-animate-span\">2</span>\n                        <span class=\"number-animate-span\">3</span>\n                        <span class=\"number-animate-span\">4</span>\n                        <span class=\"number-animate-span\">5</span>\n                        <span class=\"number-animate-span\">6</span>\n                        <span class=\"number-animate-span\">7</span>\n                        <span class=\"number-animate-span\">8</span>\n                        <span class=\"number-animate-span\">9</span>\n                        <span class=\"number-animate-span\">0</span>\n                        <span class=\"number-animate-span\">.</span>\n                      </div>";
      this.extend(this.setting, y);
      this.init(this.$parent, y);
    }

    _createClass(OdometerFn, [{
      key: "init",
      value: function init(x, y) {
        x.innerHTML = this.setNumDom(this.numToArr(this.setting.num));
        this.animate(x);
      }
    }, {
      key: "animate",
      value: function animate($parent) {
        //执行动画
        var $dom = $parent.querySelectorAll('.number-animate-dom');
        var _iteratorNormalCompletion = true;
        var _didIteratorError = false;
        var _iteratorError = undefined;

        try {
          for (var _iterator = $dom[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
            var o = _step.value;
            var num = o.getAttribute('data-num');
            if (this.setting.zero) num = num == 0 ? 10 : num;
            this._height = o.offsetHeight / 12;
            o.style['transform'] = o.style['-webkit-transform'] = 'translateY(' + (num == "." ? -11 * this._height : -num * this._height) + 'px)';
            o.style['transition'] = o.style['-webkit-transition'] = (num == "." ? 0 : this.setting.speed / 1000) + 's';
          }
        } catch (err) {
          _didIteratorError = true;
          _iteratorError = err;
        } finally {
          try {
            if (!_iteratorNormalCompletion && _iterator.return != null) {
              _iterator.return();
            }
          } finally {
            if (_didIteratorError) {
              throw _iteratorError;
            }
          }
        }
      }
    }, {
      key: "setNumDom",
      value: function setNumDom(arrStr) {
        var _this = this;

        //分割符号
        var shtml = '<div class="number-animate">';
        arrStr.forEach(function (o, i) {
          if (i != 0 && (arrStr.length - i) % 3 == 0 && _this.setting.symbol != "" && o != ".") {
            shtml += '<div class="number-animate-dot"><span>' + _this.setting.symbol + '</span></div>' + _this.html.replace("{{num}}", o);
          } else {
            shtml += _this.html.replace("{{num}}", o);
          }
        });
        shtml += '</div>';
        return shtml;
      }
    }, {
      key: "update",
      value: function update(num) {
        var newArr = this.numToArr(num),
            $dom = this.$parent.querySelectorAll(".number-animate-dom");

        if ($dom.length != newArr.length) {
          this.$parent.innerHTML = this.setNumDom(this.numToArr(num));
        } else {
          ;
          [].forEach.call($dom, function (o, i) {
            o.setAttribute('data-num', newArr[i]);
          });
        }

        this.animate(this.$parent);
      }
    }, {
      key: "numToArr",
      value: function numToArr(num) {
        num = parseFloat(num).toFixed(this.setting.dot);
        var arrStr = typeof num == 'number' ? num.toString().split("") : num.split("");
        var arrLen = arrStr.length;

        if (arrStr.length <= this.setting.len) {
          for (var _lens = 0; _lens < this.setting.len - arrLen; _lens++) {
            arrStr.unshift(0);
          }
        }

        return arrStr;
      }
    }, {
      key: "extend",
      value: function extend(n, n1) {
        for (var i in n1) {
          n[i] = n1[i];
        }

        ;
      }
    }]);

    return OdometerFn;
  }();

  return OdometerFn;
}(window, document);